<template>
    <div class="common-layout">

        <el-container class="content">

            <!-- 侧边栏容器 -->
            <el-aside :width="settingStore.asideWidth" class="aside-container">
                <el-scrollbar>
                    <Menu></Menu>
                </el-scrollbar>
            </el-aside>

            <!-- 主体容器 -->
            <el-container>
                <!-- 头部容器 -->
                <el-header class="header-container">
                    <el-row :gutter="20" class="row-breadcrumb">
                        <!-- 面包屑 左边-->
                        <el-col :span="8">
                            <el-row>
                                <!-- 切换图标 -->
                                <el-col :span="2">
                                    <SvgIcon class="mouse_style" :name="settingStore.foldIcon" color="#f50"
                                        @click="settingStore.isFold = !settingStore.isFold">
                                    </SvgIcon>
                                </el-col>
                                <!-- 面包屑组件 -->
                                <el-col :span="22">
                                    <el-breadcrumb separator="/">
                                        <el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item>
                                        <el-breadcrumb-item>
                                            <a href="/">promotion management</a>
                                        </el-breadcrumb-item>
                                        <el-breadcrumb-item>promotion list</el-breadcrumb-item>
                                        <el-breadcrumb-item>promotion detail</el-breadcrumb-item>
                                    </el-breadcrumb>
                                </el-col>
                            </el-row>
                        </el-col>
                        <!-- 右边 个人信息和设置 -->
                        <el-col :span="6" :offset="10">
                            <div>占据内容区</div>
                        </el-col>
                    </el-row>
                    <!-- 选项卡 -->
                    <el-row>
                        <el-col :span="24">
                            <el-tabs type="card" closable>
                                <el-tab-pane label="首页" name="home"></el-tab-pane>
                            </el-tabs>
                        </el-col>
                    </el-row>
                </el-header>
                <!-- 视图容器 -->
                <el-main>
                    <RouterView></RouterView>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script setup lang='ts'>
import SvgIcon from '@/components/svgIcon/SvgIcon.vue';
import Menu from '@/components/menu/Menu.vue';
import { onMounted, ref } from 'vue';
import { useHomeStore } from '@/stores/index'
import { useLayoutStore } from '@/stores/settings'
import router from '@/router/index';
const store = useHomeStore()
const settingStore = useLayoutStore()

</script>

<style scoped>
.grid-content {
    border-radius: 4px;
    min-height: 36px;
}

.el-menu {
    border: none;
}

.content {
    height: 100vh;
}

.aside-container {
    background: #d3dce6;
    background-color: #304156;
    transition: width 0.3s;
}

.mouse_style {
    cursor: pointer;
}

.header-container {
    height: 80px;
}

.row-breadcrumb {
    height: 20px;
    margin-top: 15px;
}
</style>
